/*.container{
    min-height: 100%;
}
*/

.tooltip {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/
    float: right;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 240px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    right: 20%;
    margin-left: -60px;
    /* 淡入 - 1秒内从 0% 到 100% 显示: */
    opacity: 0;
    transition: opacity 1s;
}


/*箭头*/

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 90%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.tooltip_left {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/
    float: right;
}

.tooltip_left .tooltiptext_left {
    visibility: hidden;
    width: max-content;
    /*width: -webkit-fill-available;*/
    min-width: 100%;
    background-color: rgba(53, 53, 53, 0.877);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 10px;
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 200%;
    margin-left: -60px;
    /* 淡入 - 1秒内从 0% 到 100% 显示: */
    opacity: 0;
    transition: opacity 1s;
}


/*箭头*/

.tooltip_left .tooltiptext_left::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 25%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent rgba(39, 39, 39, 0.822) transparent;
}

.tooltip_left:hover .tooltiptext_left {
    visibility: visible;
    opacity: 1;
}

.tooltip_bottom {
    position: relative;
}

.tooltip_bottom .tooltiptext_bottom {
    visibility: hidden;
    width: max-content;
    /*width: -webkit-fill-available;*/
    min-width: 100%;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 10px;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 200%;
    margin-left: -60px;
    /* 淡入 - 1秒内从 0% 到 100% 显示: */
    opacity: 0;
    transition: opacity 1s;
}


/*箭头*/

.tooltip_bottom .tooltiptext_bottom::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 25%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.tooltip_bottom:hover .tooltiptext_bottom {
    visibility: visible;
    opacity: 1;
}